{{include_file name='public/header' title='数据字典'}}

<style>
    .table-name{
        text-indent: 8px;
        border-left: 2px solid #88B7E0;
    }
    .upload-box {
        border: 2px dashed #efefef;
        border-radius: 5px;
        background: white;
        min-height: 150px;
        padding: 20px 20px;
        cursor: pointer;
        margin-bottom: 20px;
    }

    .upload-box .icon {
        margin: 0 auto .8rem;
        display: inline-block;
        width: 6.4rem;
        height: 5.760000000000001rem;
        background-position: -11.8rem -22.1rem;
        background-repeat: no-repeat;
        -webkit-background-size: 60rem;
        -moz-background-size: 60rem;
        background-size: 60rem;
        display: block;
    }

    .upload-box .icon i{
        opacity: .6;
    }

    .upload-box p {
        margin: 0;
        text-align: center;
        font-weight: bold;
        font-size: 1.75rem;
    }

    .upload-box p small {
        font-weight: normal;
        font-size: 1.28rem;
        opacity: .7;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        filter: alpha(opacity=70);
    }

    .sql-upload {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 260px;
        padding: 0;
        cursor: pointer;
        filter:alpha(opacity=0);
        -moz-opacity:0;
        opacity:0;
        outline: medium none;
    }

</style>

</head>

<body>

<div id="wrapper">

    <!-- Navigation -->
    {{include_file name='public/nav' sidebar='project_sidebar'}}
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <div class="page-header">
                    <h1>数据字典 </h1>
                    <div class="opt-btn">

                        {{if \app\member::has_rule({{$project.id}}, 'map', 'import')}}
                        <a href="javascript:void(0);" class="btn hidden-xs btn-sm btn-info js_importMapBtn" data-toggle="tooltip" title="导入建表sql文件" data-placement="bottom"><i class="fa fa-fw fa-upload"></i>导入</a>
                        {{/if}}

                        {{if \app\member::has_rule({{$project.id}}, 'map', 'update')}}
                        <a href="javascript:void(0);" class="btn hidden-xs btn-sm btn-success js_editMapBtn" data-toggle="tooltip" title="编辑数据字典" data-placement="bottom" data-id="{{$project.id}}"><i class="fa fa-fw fa-edit"></i>编辑</a>
                        {{/if}}

                        {{if \app\member::has_rule({{$project.id}}, 'map', 'delete')}}
                        <a {{if !$maps}}disabled{{/if}} href="javascript:void(0);" class="btn hidden-xs btn-sm btn-danger js_deleteMapBtn" data-toggle="tooltip" title="删除数据字典" data-placement="bottom"  data-id="{{$project.id}}"><i class="fa fa-fw fa-times"></i>删除</a>
                        {{/if}}

                        {{if \app\member::has_rule({{$project.id}}, 'map', 'export')}}
                        <a {{if !$maps}}disabled{{/if}} href="{{url("map/export")}}?id={{id_encode($project.id)}}" class="btn hidden-xs btn-sm btn-warning" data-toggle="tooltip" title="导出HTML" data-placement="bottom"><i class="fa fa-fw fa-download"></i>导出</a>
                        {{/if}}
                    </div>
                </div>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="row">

            <div class="col-lg-12">

                <div class="panel panel-default">

                    {{include_file name='project/tab'}}

                    <div class="panel-body">
                        {{foreach $maps as $map}}
                        <div class="table-responsive">
                            <p class="table-name"><strong>{{$map.table_name}}{{if $map.table_comment}}({{$map.table_comment}}){{/if}}</strong></p>
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr class="success">
                                    <th>字段</th>
                                    <th>类型</th>
                                    <th>是否为空</th>
                                    <th>是否主键</th>
                                    <th>默认值</th>
                                    <th>备注</th>

                                </tr>
                                </thead>
                                <tbody>
                                {{foreach json_decode($map.field_json, true) as $field}}
                                <tr>
                                    <td>{{$field.field}}</td>
                                    <td>{{$field.type}}</td>
                                    <td><i class="fa {{if $field.is_null}}fa-check{{else}}fa-times{{/if}}"></i></td>
                                    <td><i class="fa {{if $field.is_pk}}fa-key{{/if}}"></i></td>
                                    <td>{{$field.default_value}}</td>
                                    <td>{{$field.comment}}</td>

                                </tr>
                                {{/foreach}}

                                </tbody>
                            </table>
                        </div>
                        {{foreachelse}}

                        <p class="text-center">
                            <i class="fa fa-fw fa-ban fa-3x"></i>
                            <br/>
                            无数据</p>
                        {{/foreach}}
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>

    </div>
    <!-- /#page-wrapper -->




</div>
<!-- /#wrapper -->

<hr>
<p class="text-center">{{get_config('copyright')}}</p>

<!-- 导入数据字典模态框 -->
<div class="modal fade" id="js_importMapModal" tabindex="2" role="dialog">
    <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">导入数据字典</h4>
                </div>
                <div class="modal-body">
                    <div class="alert alert-dismissable alert-warning">
                        <i class="fa fa-fw fa-info-circle"></i>
                        导入建表sql文件后会覆盖已有数据字典，请谨慎操作！
                    </div>
                    <div class="form-group">

                        <div class="upload-box">
                            <div class="icon"><i class="fa fa-fw fa-upload fa-5x"></i></div>
                            <p>点击这里上传建表sql文件</p>
                            <p><small>上传文件最大不能超过2M</small></p>
                            <input id="sql-upload" class="sql-upload" type="file" name="sql-file">
                        </div>

                        <div class="progress">
                            <div id="processbar" class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                                0%
                            </div>
                        </div>



                    </div>

                </div>

            </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<!-- 删除数据字典模态框 -->
<div class="modal fade" id="js_deleteMapModal" tabindex="2" role="dialog">
    <div class="modal-dialog" role="document">
        <form id="js_deleteMapForm" role="form" action="{{url('map/delete','','','json')}}" method="post">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">确定删除此项目的数据字典吗？</h4>
                </div>
                <div class="modal-body">
                    <div class="alert alert-dismissable alert-warning">
                        <i class="fa fa-fw fa-info-circle"></i>
                        数据字典删除后不可恢复，请谨慎操作！
                    </div>
                    <div class="form-group">
                        <input type="hidden" name="id" class="form-control">
                        <input type="text" name='password' class="form-control" placeholder="重要操作，请输入登录密码" datatype="*" nullmsg="请输入登录密码!" errormsg="请输入正确的登录密码!">
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger js_submit">删除</button>
                </div>
            </div><!-- /.modal-content -->
        </form>
    </div><!-- /.modal-dialog -->
</div>

<script src="{{STATIC_URL}}/js/ajaxfileupload.js"></script>

<script>

    //ajax文件上传
    function ajaxFileUpload() {

        $.ajaxFileUpload({
            url:"{{url('upload/sql')}}",//用于文件上传的服务器端请求地址
            secureuri:false ,//一般设置为false
            type: 'post',
            dataType: 'json',//返回值类型 一般设置为json
            fileElementId:'sql-upload',//文件上传控件的id属性
            data: { id: "{{$project.id}}"},
            success: function (data) {

                if(data.code != '200'){
                    alert(data.msg, 3000);
                }else{

                    function setProcess(){
                        var processbar = document.getElementById("processbar");
                        processbar.style.width = parseInt(processbar.style.width) + 5 + "%";
                        processbar.innerHTML   = processbar.style.width;
                        if(processbar.style.width == "100%"){

                            $('.js_restoreStatus').text('还原成功，页面刷新中').removeClass('disabled');
                            window.setInterval(function(){
                                parent.location.reload();
                            },1000);
                            window.clearInterval(bartimer);
                        }
                    }

                    var bartimer = window.setInterval(function(){setProcess();},100);

                }

            },
            error: function (data, status, e) {

                console.log(e);

            }
        });

        return false;
    }

    $(function(){

        // 导入数据字典
        $(document).delegate('.js_importMapBtn', 'click',function(){

            $('#js_importMapModal').modal('show');

        });

        $("#sql-upload").on('change', function () {
            ajaxFileUpload();
        });

        // 修改数据字典
        $(document).delegate('.js_editMapBtn', 'click',function(){
            alert('下个版本即将支持，敬请期待', 2000);return;
            var id = $(this).data('id');
            $('#page-wrapper').load("{{url('map/edit')}}", {'id':id});
        });

        // 删除数据字典
        $(document).delegate('.js_deleteMapBtn', 'click',function(){
            var id = $(this).data('id');

            if(id <= 0){
                alert('请选择要删除的项目', 1000);
            }

            $('#js_deleteMapModal input[name=id]').val(id);

            $('#js_deleteMapModal').modal('show');
        });

        //删除数据字典表单合法性验证
        $("#js_deleteMapForm").validateForm({
            success:function () {
                parent.location.reload();
            },
        });

    });
</script>

{{include_file name='public/footer'}}